<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css 样式思路
			 1.统配选择器：微软雅黑、#f5f5f5 浅灰、外边距为0
			 2.#product_card：边框、内边距、外边距、阴影【透明度.1】、文字居中
			 3.img：边框倒角、内外边距？	【微调】
			 4.h3：颜色、内外边距？	【微调】
			 5.p：字体大小、颜色
			 6.p+span:span、内外边距？	【微调】、颜色
			 */
			#product-card{
				width: 271px;
				height: 500px;
				background: #f5f5f5;
				border: 1px solid #7e7e7e .1;
				border-radius: 3px;
				box-shadow: 1px 1px 3px 3px #a0a0a0;
			}
			img{
				border-radius: 5px;
				margin-top: 11px;
				margin-left: 11px;
			}
			h3{
				text-align: center;
			}
			p{
				text-align: center;
				color: #ee4539;
			}
			#ping{
				text-align: center;
				color: #7e7e7e;
			}
			#product-card p span{
				text-align: center;
				color: #7e7e7e;
			}
			#east-card{
				margin-top: 50px;
				width: 220px;
				height: 40px;
				border: 1px solid #919191 .1;
				border-radius: 5px;
				box-shadow: 1px 1px 3px 3px #a0a0a0;
			}
			#goods{
				line-height: 40px;
				margin-left: -90px;
				color: #767676;
				margin-top: 20px;
			}
			#search{
				margin-top: -49px;
				margin-left: 162px;
				width: 50px;
				height: 27px;
				line-height: 27px;
				text-align: center;
				background: #ff0f23;
				border-radius: 5px;
				color: #ffffff;
			}
		</style>
	</head>
	<body>
		<!-- 网页：1.html 结构【原生图分析】 -->
		<div id="product-card">
			<img src="img/SU7.jpg" width="249px" height="350px" alt="汽车">
			<h3>小米SU7</h3>
			<p>￥279999.00</p>
			<p id="ping">已有<span>10万+</span>评价</p>
		</div>
		<div id="east-card">
			<p id="goods">搜索 京东商品</p>
			<div id="search">搜索</div>
		</div>
	</body>
</html>